//1.tasks 数据结构
let tasks = [
    { id: 1, text: "睡觉", completed: false },
    { id: 2, text: "吃饭", completed: true },
    { id: 3, text: "打豆豆", completed: false }
  ];
  console.log(tasks);
  
  //2.获取元素
  let addBtn = document.querySelector(".addtask .addbtn");
  let inputText = document.querySelector(".addtask input");
  let ul = document.querySelector(".tasklist ul");
  let category =document.querySelector(".category")
  let inputSearch = document.querySelector(".search input")
  
  
  //3. 事件添加
  
  // window onload 事件
  window.addEventListener('load',function () {
    // 渲染
    renderTasks(tasks);
    //添加事件
  })
  // 添加按钮
  addBtn.addEventListener('click', function () {
    if (inputText.value.trim()!="") {
  
      //数据添加
      //1.产生数据-task对象
      //数组最有一个值+1或者如果数组为空，则设置初始值为id为1
      let id = tasks.length ? tasks[tasks.length - 1].id + 1 : 1;
      const task = {
          id: id,
          text: inputText.value,
          completed: false
      };
      //2.把对象放到tasks数组中
      tasks.push(task);
      //3.显示下
      // console.log(tasks);
      //4.渲染
      renderTasks(tasks);
    } else {
      //输入框为空
      window.alert('请输入添加任务信息！')
    }
    
    
  });
  // category添加事件-filter 判断是哪个按钮--事件委托
  category.addEventListener('click',function (e) {
    if (e.target.tagName=="BUTTON") {
      // 获取自定义属性中的值
      const filter = e.target.dataset.filter;
      //渲染
      renderTasks(filterTasks(tasks,filter))
    }
  })
  //搜索框enter后修改数据
  inputSearch.addEventListener('keydown',function (e) {
    // 按下回车键
    if (e.key==="Enter") {
      //判断搜索框是否为空
      if (inputSearch.value.trim()!=""){
      //拿搜索框中的值和数组中每个元素的text值进行搜索 得到一个数组
      let searchTasks = tasks.filter(task=>task.text.includes(inputSearch.value.trim()))
  
      //渲染
        renderTasks(searchTasks);
      }else{
        //搜索框为空
      window.alert('请在搜索框中输入搜索信息！')
      }
    }
  })
  // 使用事件委托处理删除操作
  ul.addEventListener('click',function (e) {
    removeTask(e);
    editTask(e);
    changeStatus(e);
  });
  // 4.函数
  function renderTasks(tasks) {
    
      // 任务列表的渲染
    //清空现有ul中html
    ul.innerHTML = '';
    tasks.forEach(task => {
      // 创建一个元素
      const li = document.createElement('li');
      // 修改元素的html内容
      li.innerHTML = `<div class="left">
              <input type="checkbox" data-id="${task.id}" ${task.completed?'checked':''} >
              <span class="${task.completed?'line':''}">${task.text}</span>
            </div>
            <div class="btn-group">
              <button  class="editBtn" data-id="${task.id}">编辑</button>
              <button class="delBtn" data-id="${task.id}">删除</button>
            </div>
        `;
        // 修改li中checkbox的checked属性
      // const input = li.querySelector("input");
      
      // input.checked = task.completed;
      // console.log(input.checked);
          // 找删除按钮
          // const delBtn = li.querySelector(".delBtn"); 
          // 绑定删除函数
          //delBtn.onclick = () => removeTask(task.id);
          // delBtn.addEventListener('click',function (e) {
          //   removeTask(task.id,e)
            
          // });
      // 把元素放到ul中
      ul.appendChild(li);
    });
    updateCount();
    }
  
  // 
  // input :
  /*
    功能：分类过滤函数
    输入：tasks-所有任务，filter[all,completed,uncompleted] 
    输出：过滤后的任务
  */
  function filterTasks(tasks,filter) {
    switch (filter) {
      case "completed":
       return tasks.filter(task=>task.completed);
      case "uncompleted":
        return  tasks.filter(task=>!task.completed);
      default:
        return tasks;
    }
  }
  
  // 改变task的完成属性值
  function changeStatus(e) {
    let li ;
      if (e.target.nodeName == "INPUT") {
       //修改数据
      // 获取task的id值
      const id = e.target.dataset.id;
      console.log(id);
      
      const task = tasks.find(task=>task.id==id);
      console.log(task);
      console.log(e.target.checked);
      task.completed =   e.target.checked;
      //修改后面文本的样式
      e.target.parentElement.children[1].classList.toggle('line');
  
      updateCount()
      }
    
  }
  // 删除函数
  function removeTask(e) {
  
    let li ;
      if (e.target.nodeName == "BUTTON"&& e.target.className=="delBtn") {
       // 删除数据
          // 获取task的id值
      const id = e.target.dataset.id;
      tasks = tasks.filter(task=>task.id!=id);
      
          //交互
         //获取包含删除按钮的li元素
          li = e.target.parentElement.parentElement;
          //自己删除自己
          // li.remove();
          // 在父元素中删除孩子
          ul.removeChild(li);
          updateCount()     
      } 
      
  }
  //编辑函数
  function editTask(e) {
  
    let li ;
      if (e.target.nodeName == "BUTTON"&& e.target.className=="editBtn") {
       // 删除数据
          // 获取task的id值
      const id = e.target.dataset.id;
      const task = tasks.find(task=>task.id==id);
      console.log(id);
      console.log(task);
      
      showEditAlert(id,task.text)
      
  
  
      }
      
  }
  
  function updateCount() {
     // 底部统计数据的渲染
        //生成统计数据
        let all = tasks.length;
        let completed = tasks.filter(task=>task.completed).length;
        let uncompleted = all - completed;
        
    // 修改对应元素的数据
      // const spans = document.querySelectorAll('.footer span');
      // spans[0].textContent = `全部 ${all}`;
      // spans[1].textContent = `已完成 ${completed}`;
      // spans[2].textContent = `未完成 ${uncompleted}`;
      
      //获取元素的另外的方法
      document.querySelector('.footer span:nth-child(1)').textContent = `全部 ${all}`;
      document.querySelector('.footer span:nth-child(2)').textContent = `已完成 ${completed}`;
      document.querySelector('.footer span:nth-child(3)').textContent = `未完成 ${uncompleted}`;
    
  }
